<!DOCTYPE html>
<meta charset="UTF-8">
<div style="margin: 10px 0;"></div>
<div style="position: relative; overflow: hidden; border: 1px solid #ccc; width: 500px; height: 300px">
	<div data-type="draggable" data-defs="onDrag:onDrag"
		style="width: 100px; height: 100px; background: #fafafa; border: 1px solid #ccc;"></div>
</div>
<script>
	function onDrag(e) {
	    var d = e.data;
	    if (d.left < 0) {
		    d.left = 0
	    }
	    if (d.top < 0) {
		    d.top = 0
	    }
	    if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
		    d.left = $(d.parent).width() - $(d.target).outerWidth();
	    }
	    if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
		    d.top = $(d.parent).height() - $(d.target).outerHeight();
	    }
    }
</script>
